<template>
  <contents :heightInclude="['tabBar', 'navBar']" class="order_details_page">
	    <u-navbar
	  		:background="{ background: '#0049AC' }"
	  		title-color="#fff"
	  		:title="$t('locales.pages/order/details/index')"
	  		:is-back="false"
	  	>
			<view class="heade">
				<view class="back" @click="back">
					<u-icon name="arrow-left" color="#fff" size="40"></u-icon>
				</view>
			</view>
		</u-navbar>
		
    <OrderState v-model="orderInfo.orderStatus" :info="orderInfo" />
    <OrderAddress v-model="orderInfo.orderInfo" />
    <LogisticsTrack v-if="orderInfo.logisticsResult && orderInfo.logisticsResult.traces.length > 0" v-model="orderInfo.logisticsResult" />
    <view class="box">
      <OrderGoodsInfo v-model="orderInfo.orderItemVOList" />
      <view style="border-radius: 12rpx; overflow: hidden">
        <OrderPriceInfo v-model="orderInfo" type="view" />
      </view>
      <OrderMsgInfo v-model="orderInfo" />
    </view>
    <!-- 上传付款凭证 -->
    <view
      class="goods_qualifications"
      v-if="orderInfo.toBePaySonState === 3 || orderInfo.toBePaySonState === 5"
    >
      <view class="title"
        ><text style="color: #f13030">*</text>
        {{ $t('locales.uploadPaySuccess') }}
      </view>
      <u-upload
        :show-progress="false"
        custom-btn
        width="120"
        height="120"
        max-count="3"
        :action="baseUrls + '/file/upload'"
        :max-size="3145728"
        del-bg-color="#999"
        @on-uploaded="uploadSuccess"
        @on-remove="uploadRemove"
        :file-list="fileList"
        @on-choose-complete="uploadComplete"
        @on-error="uploadError"
        @on-oversize="oversize"
      >
        <view slot="addBtn" class="addBtn">
          <u-icon name="plus" color="#ccc" size="40"></u-icon>
        </view>
      </u-upload>
      <view class="info_item">
        <view class="name">{{ $t('locales.payVouRemarks') }}</view>
        <view class="val"
          ><u-input
            maxlength="100"
            v-model="orderInfo.payRemarks"
            height="40"
            :placeholder="$t('locales.optional')"
        /></view>
      </view>
    </view>
    <!-- 预览付款凭证 -->
    <view class="goods_qualifications" v-if="orderInfo.toBePaySonState === 4">
      <view class="title">{{ $t('locales.payVou') }}</view>
      <img
        class="view_img"
        v-for="(img, i) in orderInfo.orderCommonPayVou.pictureList"
        :key="img.id"
        :src="img.pictureUrl"
        @click="exhibitionImg(orderInfo.orderCommonPayVou.pictureList, i)"
      />
      <view class="info_item">
        <view class="name">{{ $t('locales.payVouRemarks') }}</view>
        <view class="val">
          {{ orderInfo.orderCommonPayVou.remarks }}
        </view>
      </view>
    </view>
    <OrderButton
      v-model="orderInfo"
      :cartIdList="cartIdList"
      :type="orderInfo.orderStatus"
      @change="getData"
    />
  </contents>
</template>

<script>
import { orderDetail, getRefundVoucherByOrderId } from '@/api/http/order'
import OrderGoodsInfo from '@/components/orderGoodsInfo'
import OrderPriceInfo from '@/components/orderPriceInfo'
import OrderState from '@/components/orderState'
import OrderButton from '@/components/orderButton'
import OrderMsgInfo from '@/components/orderMsgInfo'
import OrderAddress from '@/components/orderAddress'
import LogisticsTrack from '@/components/logisticsTrack'
import { baseUrl } from '@/config'
import { getQueryVariable } from '@/util'
export default {
  components: {
    OrderAddress,
    OrderGoodsInfo,
    OrderPriceInfo,
    OrderButton,
    OrderState,
    OrderMsgInfo,
    LogisticsTrack
  },
  data() {
    return {
      routerParams: {},
      orderInfo: {
        orderItemVOList: []
      },
      cartIdList: [],
      baseUrls: baseUrl(),
      fileList: []
    }
  },
  
  computed: {
	isFormPay() {
		return this.routerParams.is_pay === '1'
	}  
  },
  
  onLoad(opt) {
    this.routerParams = opt
    this.getData()
  },
  methods: {
    getData() {
      orderDetail({
        orderId: this.routerParams.id
      }).then((res) => {
        if (res.code === 200) {
          let end = res.data.endTime.replace(/\-/g, '/')
          res.data.downTime = (new Date(end) - new Date().getTime()) / 1000
          this.orderInfo = res.data
          this.cartIdList = res.data.orderItemVOList.map((item) => item.goodsId)
          // 支付凭证驳回数据回现
          if (res.data.toBePaySonState === 5) {
            res.data.orderCommonPayVou.pictureList.map((item) => {
              item.url = item.pictureUrl + '&objectName=' + item.picture
            })
            this.fileList = this.orderInfo.orderCommonPayVou.pictureList
            this.orderInfo.picList = res.data.orderCommonPayVou.pictureList.map(
              (item) => item.picture
            )
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    // 图片选择完成
    uploadComplete() {
      uni.showLoading({
        mask: true
      })
    },
    // 图片上传完成
    uploadSuccess(fileList) {
      const imglist = []
      fileList.map((item) => {
        if (item.response) {
          imglist.push(item.response.data.objectName)
        } else {
          const objectName = getQueryVariable(item.url, 'objectName')
          imglist.push(objectName)
        }
      })
      this.orderInfo.picList = imglist
      uni.hideLoading()
    },
    // 图片上传失败
    uploadError() {
      uni.hideLoading()
    },
    // 超出大小
    oversize() {
      uni.showModal({
        content: this.$t('locales.overstep'),
        confirmColor: '#0049AC',
        showCancel: false
      })
    },
    // 移除图片
    uploadRemove(index, fileList) {
      const imglist = []
      fileList.map((item) => {
        if (item.response) {
          imglist.push(item.response.data.objectName)
        } else {
          const objectName = getQueryVariable(item.url, 'objectName')
          imglist.push(objectName)
        }
      })
      this.orderInfo.picList = imglist
    },

    exhibitionImg(urls, index) {
      const list = urls.map((item) => item.pictureUrl)
      uni.previewImage({
        current: index,
        urls: list
      })
    },
	
	back() {
		if (this.isFormPay) {
			uni.switchTab({
				url: '/pages/me/index'
			})
		} else {
			uni.navigateBack()
		}
	}
  }
}
</script>

<style lang="scss" scoped>
.order_details_page {
  .box {
    margin: 20rpx;
    margin-bottom: 0;
    border-radius: 12rpx;
    overflow: hidden;
  }
  .goods_qualifications {
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 20rpx;
    margin-bottom: 20rpx;
    padding: 0 10rpx;
    .title {
      padding: 20rpx 20rpx;
    }
    .addBtn {
      margin: 10rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .view_img {
      margin: 10rpx 20rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
      border: 1px solid #eee;
    }
    .info_item {
      display: flex;
      min-height: 80rpx;
      padding: 20rpx 20rpx;
      border-bottom: 1px solid #eee;
      .name {
        width: 200rpx;
      }
      .val {
        margin-left: 20rpx;
        text-align: right;
        flex: 1;
      }
    }
  }
}
</style>
